<template>
	<view
		class="nav-bar"
		:style="{
			'background-color': prop.transparentTitle === 'auto' ? `rgba(255, 255, 255, ${opacity})` : '#FFFFFF'
		}"
	>
		<view class="statu-bar"></view>
		
		<!-- #ifdef MP-WEIXIN -->
		<view style="height: 25rpx;"></view>
		<!-- #endif -->
		<!-- #ifdef APP-PLUS || H5 -->
		<view class="flex_sbc" style="height: 88rpx">
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<view class="flex_sbc" style="height: 130rpx">
		<!-- #endif -->
			<view class="u-line-1" @click="onClick('Left')">
				<slot name="left">
					<!-- #ifdef APP-PLUS || H5 -->
					<navigator open-type="navigateBack" hover-class="none" class="flex_fsc" style="height: 88rpx">
					<!-- #endif -->
					<!-- #ifdef MP-WEIXIN -->
					<navigator open-type="navigateBack" hover-class="none" class="flex_fsc" style="height: 130rpx">
					<!-- #endif -->
						<image
							:src="`${setting.oss_pub_domain}/app-img/icon/icon_return${opacity || prop.isBlack ? '' : '_white'}.png`"
							class="go-back"
						></image>
					</navigator>
				</slot>
			</view>
			<view class="u-line-1" @click="onClick('Title')">
				<slot>
					<view
						class="u-line-1 text-c z-font-32"
						:class="{ 'uni-white': !opacity && !prop.isBlack }"
						style="transition: all 0.2s"
					>
						{{ prop.title }}
					</view>
				</slot>
			</view>
			<view @click="onClick('Right')" class="flex_sh" :class="{ 'uni-white': !opacity && !prop.isBlack }">
				<slot name="right">
					<view class="u-line-1" style="min-width: 48rpx">{{ prop.rightText }}</view>
				</slot>
			</view>
		</view>
	</view>
	<!-- #ifdef APP-PLUS || H5 -->
	<view v-if="prop.transparentTitle != 'auto'" style="height: calc(var(--status-bar-height) + 88rpx)"></view>
	<!-- #endif -->
	<!-- #ifdef MP-WEIXIN -->
	<view v-if="prop.transparentTitle != 'auto'" style="height: calc(var(--status-bar-height) + 155rpx)"></view>
	<!-- #endif -->
	
</template>
<script setup>
import { onPageScroll } from '@dcloudio/uni-app';
import { ref } from 'vue';

const opacity = ref(0);
onPageScroll((e) => {
	if (prop.transparentTitle != 'auto') return;
	const op = e.scrollTop / 150;
	if (op >= 1 && opacity.value < 1) {
		if (opacity.value != 1) {
			opacity.value = 1;
			emit('status', 1);
		}
		return;
	}
	if (op <= 1 && Math.abs(op - opacity.value) > 0.05) opacity.value = e.scrollTop / 150;
	if (opacity.value <= 0.05 && opacity.value != 0) {
		opacity.value = 0;
		emit('status', 0);
	}
});

const prop = defineProps({
	title: String,
	// auto 自动 #xxxxxx 固定颜色
	transparentTitle: {
		type: String,
		default: '#FFFFFF'
	},
	isBlack: {
		type: Boolean,
		default: true
	},
	rightText: String
});

const emit = defineEmits(['clickRight', 'clickLeft', 'clickTitle', 'status']);
function onClick(type) {
	emit('click' + type);
}
</script>
<style lang="scss" scoped>
.nav-bar {
	z-index: 98;
	width: 100vw;
	box-sizing: border-box;
	padding: 0 24rpx;
	position: fixed;
	left: 0;
	top: 0;
	transition: all 0.1s;
	.statu-bar {
		height: var(--status-bar-height);
	}
	.go-back {
		width: 48rpx;
		height: 48rpx;
		flex-shrink: 0;
	}
}
</style>
